<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true" %>
<html>
<head>
    <title>角色管理</title>
    <%@include file="/common/header.jsp"%>
</head>
<body>
<div id="root">
    <card>
        <i-button type="primary" @click="add()">添加角色</i-button>
        <i-button type="error" @click="grant()">授权角色</i-button>
    </card><%--@on-selection-change--%>
    <i-table :columns="columns" :data="data" border stripe @on-selection-change="tableSelect=arguments[0]">
        <template slot-scope="{row,index}" slot="action">
            <i-Button type="success" size="large" @click="update(row,index)">修改</i-Button>
            <i-Button type="error" size="large" @click="del(row,index)">删除</i-Button>
        </template>
    </i-table>
    <Modal v-model="modaladd" title="添加角色" @on-ok="doadd">
        <i-form :label-width="80">
            <Form-Item label="角色编码">
                <i-input v-model="role.roleCode"></i-input>
            </Form-Item>
            <Form-Item label="角色名字">
                <i-input v-model="role.roleName"></i-input>
            </Form-Item>
        </i-form>
    </Modal>
    <Modal v-model="modalupdate" title="修改角色" @on-ok="doupdate">
        <i-form :label-width="80">
            <Form-Item label="角色编码">
                <i-input v-model="role.roleCode"></i-input>
            </Form-Item>
            <Form-Item label="角色名字">
                <i-input v-model="role.roleName"></i-input>
            </Form-Item>
            <Form-Item label="修改时间">
                <%--<i-input v-model="role.modifyDate"></i-input>--%>
                <Date-Picker type="datetime" format="yyyy-MM-dd HH:mm" v-model="role.modifyDate"></Date-Picker>
            </Form-Item>
        </i-form>
    </Modal>
    <Modal v-model="modalgrant" title="角色授权" @on-ok="dogrant">
        <Tree ref="tree":data="treedata" show-checkbox multiple style="margin-left: 50px;"></Tree>
    </Modal>
</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            columns:[
                {
                    type: "selection",
                    width: 60,
                    align: "center"
                },
                {title:"角色编码",key:"roleCode"},
                {title:"角色名字",key:"roleName"},
                {title:"创建时间",key:"creationDate"},
                {title:"修改时间",key:"modifyDate"},
                {title:"操作",slot:"action"}
            ],
            data:[],
            modaladd:false,
            modalupdate:false,
            role:{},
            treedata:[],
            modalgrant:false,
            tableSelect:[]
        },
        mounted(){
            this.getrolelist();
        },
        methods:{
            getrolelist(){

                axios.get(`${apath}/sys/role/list`)
                    .then(({data})=>{
                        this.data=data.result;
                    })
            },
            add(){
                this.role={};
                this.modaladd=true;
            },
            doadd(){
                axios.post(`${apath}/sys/role/add`,this.role)
                    .then(({data})=>{
                        alert("添加成功")
                        iview.Message.success({content:data.msg})
                        this.getrolelist();
                    })
            },
            del(row,index){
                let _this = this;
                iview.Modal.confirm({
                    title:"确定是否要删除?",
                    content:"此操作为不可逆,请谨慎使用",
                    onOk(){
                        axios.get(`${apath}/sys/role/del/${row.id}`)
                            .then(({data})=>{
                                iview.Message.success({content:data.msg})
                                _this.getrolelist();
                            })
                    },
                    onCancel(){
                        alert("取消")
                    }
                })

            },
            update(row,index){
                this.role = row;
                this.modalupdate=true;
            },
            doupdate(){
                // axios.defaults.headers = {
                //     "Content-type": "application/x-www-form-urlencoded"
                // };
                //Qs.stringify(this.role)      stringify :对象role转为序列化字符串
                let params=Qs.stringify(this.role,{serializeDate:(date)=>{
                        return moment(date).format("YYYY-MM-DD HH:mm");
                    }});
                //Qs.parse(params)  将字符串转为json类型
                axios.post(`${apath}/sys/role/update`,Qs.parse(params))
                    .then(({data})=>{
                        iview.Message.success({content:data.msg})
                        this.getrolelist();
                    })
            },
            grant(){
                if(this.tableSelect.length!=1){
                    iview.Modal.confirm({
                        title:"信息提示",
                        content:"只能选择一项,请重新选择授权的角色"
                    })
                    return;
                }
                axios.get(`${apath}/sys/role/grant?roleId=${this.tableSelect[0].id}`)
                    .then(({data})=>{
                        this.treedata=data.result;
                        this.modalgrant=true;
                    })
            },
            dogrant(){
                let arr = this.$refs.tree.getCheckedAndIndeterminateNodes()
                    .map(node=>"nid="+node.id).join("&");
                let param ="roleId="+this.tableSelect[0].id;
                let params= param+"&"+arr;
                axios.get(`${apath}/sys/role/dogrant?${params}`)
                    .then(({data})=>{
                        iview.Message.success({content:data.msg})
                        this.getrolelist();
                    })
            }
        }
    })
</script>
</html>
